<template>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="pieChart" class="pie-box" style="width: 100%;height:100%;"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from 'echarts'
const pieChart = ref(null)
const myChart = ref(null)
const option = {
    textStyle: {
        color: "#fff",
    },
    title: {
        text: '饼状图',
        left: 'center',
        textStyle: {
            color: "#fff"
        }
    },
    tooltip: {
        trigger: 'item',

    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top:30,
        textStyle: {
            color: "#fff",
            fontSize: 16
        }
    },
    series: [
        {
            name: '测试数据',
            type: 'pie',
            radius: '50%',
            top:'top',
            data: [
                { value: 1048, name: '测试数据1' },
                { value: 735, name: '测试数据2' },
                { value: 580, name: '测试数据3' },
                { value: 484, name: '测试数据4' },
                { value: 300, name: '测试数据5' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label:{
                color:'#fff',
                fontSize:16
            },
            labelLine:{
                lineStyle:{
                    color:"#fff",
                    width:2
                }
            },
            
        }
    ]
};


onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart.value = echarts.init(pieChart.value);
    // 使用刚指定的配置项和数据显示图表。
    myChart.value.setOption(option);

})
</script>

<style lang="scss" scoped></style>